<template>
	<view class="main animated fadeIn faster">
		<TitleBarVue :title="title"/>
		<view class="colorfff comlinebg mt-200 py-1 rounded20 ml-2 pl-3" style="width: 300rpx;">请选择你要举报的类型</view>
		<view class="rounded40 pt-3 pb-1" style="width: 95%; margin: 20rpx auto 20rpx; background: #fcfcfc;">
			<view class="d-flex d-flex-between py-2" v-for="(i, index) in ReportTypeList" :key="i.id">
				<text class="ml-4 font32" @click="changeCheckedState(index,true)" style="flex: 1;">{{i.dictValue}}</text>
				<checkbox @click="changeCheckedState(index,true)" class="mr-2" :checked="i.checked" style="transform:scale(0.7)"></checkbox>
			</view>
		</view>
		<view class="colorfff comlinebg mb-2 py-1 rounded20 ml-2 pl-3" style="width: 300rpx;">请选择你要举报的原因</view>
		<view class="rounded40 pt-2 pb-1" style="width: 95%; margin: 0 auto 20rpx; background: #fcfcfc;">
			<view class="d-flex d-flex-between py-2" v-for="(i, index) in ReasonList" :key="i.id">
				<text class="ml-4 font32" @click="changeCheckedState(index,false)" style="flex: 1;">{{i.dictValue}}</text>
				<checkbox @click="changeCheckedState(index,false)" class="mr-2" :checked="i.checked" style="transform:scale(0.7)"></checkbox>
			</view>
		</view>
		<view class="colorfff comlinebg mb-2 py-1 rounded20 ml-2 pl-3" style="width: 300rpx;">举报说明</view>
		<view class="rounded40 pt-3 pb-1" style="width: 95%; margin: 20rpx auto 20rpx; background: #fcfcfc;">
			<textarea class="px-3 pt-2 font32" v-model="remark" placeholder="输入举报详情,以确保举报能够被处理" style="width: 90%; height: 220rpx; margin: 0 auto; color: #535353;"></textarea>
		</view>
		
		<view class="colorfff comlinebg mb-4 py-1 rounded20 pl-3 ml-2 mt-3" style="width: 300rpx;">上传举报证据</view>
		<view class="rounded40 py-3 d-flex" style="width: 95%; margin: 20rpx auto 20rpx; background: #fcfcfc;">
			<view class="plus-img d-flex d-flex-center d-flex-middle ml-3 position-relative" @click="chooseImage('screenshot1',0)" :style="{'backgroundImage': `url(${screenshot1})`}">
				<text v-if="!screenshot1" class="iconfont icon-jia1"></text>
				<view @click.stop="deleteImage($event, 'screenshot1')" v-if="screenshot1" class="rounded10 d-flex-btn position-absolute font32" style="background: #fff; width: 30rpx; height: 30rpx; top: 12rpx; right: 12rpx;">×</view>
			</view>
			<view v-if="screenshot1" class="plus-img d-flex d-flex-center d-flex-middle ml-3 position-relative" @click="chooseImage('screenshot2',1)" :style="{'backgroundImage': `url(${screenshot2})`}">
				<text v-if="!screenshot2" class="iconfont icon-jia1"></text>
				<view @click.stop="deleteImage($event, 'screenshot2')" v-if="screenshot2" class="rounded10 d-flex-btn position-absolute font32" style="background: #fff; width: 30rpx; height: 30rpx; top: 12rpx; right: 12rpx;">×</view>
			</view>
			<view v-if="screenshot2" class="plus-img d-flex d-flex-center d-flex-middle ml-3 position-relative" @click="chooseImage('screenshot3',2)" :style="{'backgroundImage': `url(${screenshot3})`}">
				<text v-if="!screenshot3" class="iconfont icon-jia1"></text>
				<view @click.stop="deleteImage($event, 'screenshot3')" v-if="screenshot3" class="rounded10 d-flex-btn position-absolute font32" style="background: #fff; width: 30rpx; height: 30rpx; top: 12rpx; right: 12rpx;">×</view>
			</view>
		</view>
		<view @click="submit" class="linerbg rounded50 py-2 text-center colorfff font30" style="width: 90%; margin: 0 auto 60rpx;">提交举报</view>
		<!-- <view class="d-flex-btn my-6">
			<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202867.png" mode="heightFix" style="height: 30rpx;"></image>
			<view class=" ml-1" style="color: #6db0e6; letter-spacing: 4rpx;">语音房间管理条例</view>
		</view> -->
	</view>
</template>

<script>
	import store from '@/store/index.js';
	import { DictionaryApi } from '../../http/dictionary';
	import { uploadImageApi } from '../../http/uploadImage';
	import { reportApi } from '../../http/report';
	import { mapActions } from 'vuex'
	import TitleBarVue from '../../components/TitleBar.vue';
	export default {
		data() {
			return {
				ctype:0,
				bgcolor:'transparent',
				title: '举报',
				ReportTypeList: [],
				ReasonList: [],
				screenshot1: "",
				screenshot2: "",
				screenshot3: "",
				remark: "",
				reportType: null,
				idRef: null,
				toUid: null,
				preIimages: []
			}
		},
		components: {TitleBarVue},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#ffffff'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		methods: {
			...mapActions('permissionToast', ['requstPermission']),
			goback() {
				uni.navigateBack({
					delta: 1
				});
			},
			changeCheckedState(index,isType) {
				if(isType) {
					this.ReportTypeList[index].checked = this.ReportTypeList[index].checked? false : true
				} else {
					this.ReasonList[index].checked = this.ReasonList[index].checked? false : true
				}
			},
			async queryTypeReason() {
				let params = {
					dictId: 3,
					pageIndex: 1,
					pageSize: 30,
				}
				const Typeres = await DictionaryApi.Dictionary(params)
				Typeres.records.forEach(i => {
					let addparams = {
						checked: false
					}
					i = Object.assign(i, addparams);
				})
				this.ReportTypeList = Typeres.records
				params.dictId = 4
				const ReasonRes = await DictionaryApi.Dictionary(params)
				ReasonRes.records.forEach(i => {
					let addparams = {
						checked: false
					}
					i = Object.assign(i, addparams);
				})
				this.ReasonList = ReasonRes.records
			},
			async uploadImg(screenshot, files) {
				let res = await uploadImageApi.Upload(files)
				this[screenshot] = res.data
				this.preIimages.push(res.data)
			},
			chooseImage: async function(screenshot,dex) {
				if(!this[screenshot]) {
					uni.chooseImage({
						count: 1,
						sizeType: ['original'],
						success: (res) => {
							this.uploadImg(screenshot,res.tempFilePaths[0])
						},
						fail: (err) => {
							console.log("err: ",err);
						}
					})
				} else {
					uni.previewImage({
						current: dex, // 当前显示图片索引
						urls: this.preIimages,// 需要预览的图片http链接列表
					});
				}
			},
			deleteImage(e, screenshot) {
				e.stopPropagation();
				if(screenshot === 'screenshot1') {
					console.log("第一张");
					this.screenshot1 = this.screenshot2
					this.screenshot2 = this.screenshot3
					this.screenshot3 = ""
					this.preIimages.splice(0, 1);
				}
				if(screenshot === 'screenshot2') {
					console.log("第二张");
					this.screenshot2 = this.screenshot3
					this.screenshot3 = ""
					this.preIimages.splice(1, 1);
				}
				if(screenshot === 'screenshot3') {
					console.log("第三张");
					this[screenshot] = ""
					this.preIimages.splice(2, 1);
				}
			},
			// 提交举报
			async submit() {
				let reportTypeIds = "" // 举报类型id
				let reportTypeNames = "" // 举报类型名称
				let reportReasonIds = "" // 举报原因id
				let reportReasonNames = "" // 举报原因名称
				
				// 举报类型处理
				this.ReportTypeList.forEach((i,dex) => {
					if(i.checked) {
						reportTypeIds = reportTypeIds + i.id + ","
						reportTypeNames = reportTypeNames + i.dictValue + ","
					}
				})
				
				reportTypeIds = reportTypeIds.substr(0,reportTypeIds.length - 1)
				reportTypeNames = reportTypeNames.substr(0,reportTypeNames.length - 1)
				
				// 举报原因处理
				this.ReasonList.forEach((i,dex) => {
					if(i.checked) {
						reportReasonIds = reportReasonIds + i.id + ","
						reportReasonNames = reportReasonNames + i.dictValue + ","
					}
				})
				reportReasonIds = reportReasonIds.substr(0,reportReasonIds.length - 1)
				reportReasonNames = reportReasonNames.substr(0,reportReasonNames.length - 1)
				
				let params = {
					type: this.reportType,
					reportTypeIds: reportTypeIds,
					reportTypeNames: reportTypeNames,
					reportReasonIds: reportReasonIds,
					reportReasonNames: reportReasonNames,
					idRef: this.idRef,
					toUid: this.toUid,
					fromUid: store.state.user.uid,
					remark: this.remark,
				}
				
				if(!reportTypeNames) {
					uni.showToast({
						icon: "none",
						title:'请选择举报类型！',
						duration:1500
					})
					return
				}
				if(!reportReasonNames) {
					uni.showToast({
						icon: "none",
						title:'请选择举报理由！',
						duration:1500
					})
					return
				}
				if(!this.remark) {
					uni.showToast({
						icon: "none",
						title:'请填写举报说明！',
						duration:1500
					})
					return
				}
				
				if(this.screenshot1) {
					params.screenshot1 = this.screenshot1
				}
				if(this.screenshot2) {
					params.screenshot2 = this.screenshot2
				}
				if(this.screenshot3) {
					params.screenshot3 = this.screenshot3
				}
				
				const res = await reportApi.report(params).then(() => {
					uni.showToast({
						title:'提交成功！',
						duration:1500
					})
					setTimeout(() => {
						this.goback()
					}, 1500)
				})
			}
		},
		onLoad(e) {
			this.reportType = e.type
			this.idRef = e.idRef
			this.toUid = e.uid
			this.queryTypeReason()
		}
	}
</script>

<style scoped lang="scss">
.main {
	overflow: hidden;
	background-color: #fff !important;
	background-image: none;
	.content {
		width: 100%;
	}
	.plus-img{
		width: 180rpx;
		height: 180rpx;
		border-radius: 36rpx;
		background-color: #f7f8fa;
		background-position: center;
		background-size: cover;
		color: #9c9c9e;
	}
}
	

.comlinebg{background-image: linear-gradient(to right, #7fc2fa, #e6bcfa)}
</style>
